<!doctype html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Multisection events and blocked time</title>

	<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_multisection.js" type="text/javascript" charset="utf-8"></script>

	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">

	<script src="../../codebase/ext/dhtmlxscheduler_limit.js" type="text/javascript" charset="utf-8"></script>
	<script src='../../codebase/ext/dhtmlxscheduler_timeline.js' type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_units.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_multiselect.js" type="text/javascript" charset="utf-8"></script>



	<style media="screen">
		html, body {
			margin: 0px;
			padding: 0px;
			height: 100%;
			overflow: hidden;
		}

	</style>

	<script charset="utf-8">
		function init() {
			scheduler.config.multi_day = true;
			scheduler.config.multisection = true;
		

			scheduler.config.xml_date = "%Y-%m-%d %H:%i";

			scheduler.locale.labels.timeline_tab = "Timeline";
			scheduler.locale.labels.unit_tab = "Unit";

			scheduler.locale.labels.section_custom = "Section";

			var sections = [
				{key: 1, label: "James Smith"},
				{key: 2, label: "John Williams"},
				{key: 3, label: "David Miller"},
				{key: 4, label: "Linda Brown"}
			];

			scheduler.createTimelineView({
				name: "timeline",
				x_unit: "hour",
				x_date: "%H:%i",
				x_step: 8,
				x_size: 24,
				y_unit: sections,
				y_property: "section_id",
				render: "bar",
				second_scale:{
					x_unit: "day", // unit which should be used for second scale
					x_date: "%F %d" // date format which should be used for second scale, "July 01"
				}
			});

			scheduler.createUnitsView({
				name: "unit",
				property: "section_id",
				list: sections
			});


			scheduler.addMarkedTimespan({
				start_date: new Date(2012, 6, 6, 10),
				end_date: new Date(2012, 6, 7, 12),
				type:"dhx_time_block",
				sections: {
					timeline: [1, 3], // list of sections
					unit: [1, 3]
				}
			});
			scheduler.addMarkedTimespan({
				start_date: new Date(2012, 6, 3, 13),
				end_date: new Date(2012, 6, 4, 13),
				type:"dhx_time_block",
				sections: {
					timeline: 2, // only 1 section
					unit: 2
				}
			});


			scheduler.config.lightbox.sections = [
				{ name: "description", height: 130, map_to: "text", type: "textarea", focus: true},
				{ name:"custom", height:22, map_to:"section_id", type:"multiselect", options: sections, vertical:"false" },
				{ name: "time", height: 72, type: "time", map_to: "auto"}
			];

			scheduler.init('scheduler_here', new Date(2012, 5, 30), "timeline");

			scheduler.parse([
				{ start_date: "2012-06-30 09:00", end_date: "2012-06-30 18:00", text:"Task A-12458", section_id:'1'},
				{ start_date: "2012-06-30 10:00", end_date: "2012-06-30 16:00", text:"Task A-89411", section_id:'1'},
				{ start_date: "2012-06-30 4:00", end_date: "2012-06-30 15:00", text:"Sections 1,3", section_id:'1,3'},
				{ start_date: "2012-06-30 16:00", end_date: "2012-07-01 17:00", text:"Task A-46598", section_id:'1'},

				{ start_date: "2012-07-01 00:00", end_date: "2012-07-01 20:00", text:"Sections 2,3,4", section_id:'2,3,4'},
				{ start_date: "2012-07-01 02:00", end_date: "2012-07-01 16:00", text:"Task B-44864", section_id:'2'},

				{ start_date: "2012-07-02 02:00", end_date: "2012-07-02 18:00", text:"Task C-32421", section_id:'3'},
				{ start_date: "2012-07-02 08:30", end_date: "2012-07-02 19:45", text:"Sections 3,1", section_id:'3,1'},


				{ start_date: "2012-06-30 11:40", end_date: "2012-07-02 16:30", text:"Sections 4,2,3", section_id:'4,2,3'},
				{ start_date: "2012-06-30 12:00", end_date: "2012-06-30 18:00", text:"Task D-12458", section_id:'4'}
			],"json");
		}
	</script>

</head>
<body onload="init();">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
	<div class="dhx_cal_navline">
		<div class="dhx_cal_prev_button">&nbsp;</div>
		<div class="dhx_cal_next_button">&nbsp;</div>
		<div class="dhx_cal_today_button"></div>
		<div class="dhx_cal_date"></div>
		<div class="dhx_cal_tab" name="unit_tab" style="right:360px;"></div>
		<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
		<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
		<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
		<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
	</div>
	<div class="dhx_cal_header">
	</div>
	<div class="dhx_cal_data">
	</div>
</div>
</body>